import { Card, Row, Col, Statistic } from 'antd';
import { UserOutlined, CloudUploadOutlined, CloudDownloadOutlined } from '@ant-design/icons';

export const Dashboard = () => {
  return (
    <div style={{ padding: '24px' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '24px' }}>Dashboard</h1>
      
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="Online Users"
              value={0}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="Total Upload"
              value="0 GB"
              prefix={<CloudUploadOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="Total Download"
              value="0 GB"
              prefix={<CloudDownloadOutlined />}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};
